<template>
  <hry-header title="明细" :showBackBtn="true">
    <div slot="action" class="right-action">
      <a-icon type="bars" @click="isShow = !isShow" />
      <ul class="list" v-show="isShow">
        <li
          v-for="(item, index) in items"
          :key="index"
          @click="changeActive(item.type)"
          :class="active === item.type ? 'active' : ''"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div slot="content" class="home form-wrapper">
      <md-scroll-view
        ref="scrollView"
        :scrolling-x="false"
        :auto-reflow="true"
        @endReached="onEndReached"
        @refreshing="refresh"
      >
        <div class="empty" v-if="data.length === 0">
          <img src="@/assets/img/empty.png" alt="" />
        </div>
        <md-cell-item
          v-for="(item, index) in data"
          :key="index"
          :title="'单号：' + item.order"
          :brief="item.create_time"
        >
          <div slot="right" style="text-align: right">
            <span
              class="money"
              :class="
                item.type === '充值' ||
                item.type === '退还' ||
                item.type === '结算'
                  ? 'add'
                  : 'cut'
              "
              >{{ item.money }}</span
            ><br />
            <span class="type">{{ item.type }}</span>
          </div>
        </md-cell-item>
        <md-scroll-view-more slot="more" :is-finished="isFinished">
        </md-scroll-view-more>
      </md-scroll-view>
    </div>
  </hry-header>
</template>

<script>
import "@/assets/fonticon/iconfont.css";
import { Field, CellItem, ScrollView, ScrollViewMore } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Field.name]: Field,
    [CellItem.name]: CellItem,
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    hryHeader: () => import("@/components/contentWrapper/index")
  },
  data() {
    return {
      isFinished: false,
      data: [],
      totalPage: 1,
      curpage: 1,
      isShow: false,
      active: 0,
      items: [
        { type: 0, name: "全部" },
        { type: 1, name: "消费" },
        { type: 2, name: "充值" },
        { type: 3, name: "退还" },
        { type: 4, name: "结算" },
        { type: 5, name: "提现" }
      ]
    };
  },
  methods: {
    changeActive(type) {
      this.active = type;
      this.isShow = false;
      this.curpage = 1;
      this.getDetail(true);
    },
    refresh() {
      this.curpage = 1;
      this.getDetail(true);
    },
    getDetail(refresh) {
      this.$ajax
        .post(this.$api.getCashFlow, {
          curpage: this.curpage,
          type: this.active
        })
        .then(res => {
          if (refresh) {
            this.data = res.data.list;
          } else {
            this.data.push.apply(this.data, res.data.list);
          }
          this.totalPage = res.data.total_page;
          if (this.curpage === this.totalPage) {
            this.isFinished = true;
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.curpage++;
      this.getDetail();
      this.$refs.scrollView.finishLoadMore();
    }
  },
  created() {
    this.getDetail(true);
  }
};
</script>

<style scoped lang="less">
.right-action {
  position: relative;
  color: #444444;
  z-index: 10;
  .list {
    position: absolute;
    top: 60px;
    right: 0;
    background: @white;
    padding: 0 27px;
    border: 1px solid @primary-color;
    border-radius: 3px;
    li {
      padding: 20px;
      font-size: 20px;
      font-weight: normal;
      letter-spacing: 3px;
    }
    .active {
      color: @primary-color;
    }
  }
}
.form-wrapper {
  height: 100%;
  width: 100%;
  padding: 20px;
  .link {
    font-size: 25px;
  }
  .ant-btn {
    margin-top: 117px;
    height: 75px;
    font-size: 30px;
  }
  .add {
    color: @primary-color;
    &:before {
      content: "+";
    }
  }
  .type {
    display: inline-block;
    margin-top: 18px;
  }
}
</style>
